<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!-- 
  Webpack 的热更新（Hot Module Replacement，HMR）和热重载（Hot Reload）是用于提升开发体验的两项功能。虽然它们的目标相似，但实现方式和效果有所不同。以下是对这两者的说明总结。
  1. 热更新（Hot Module Replacement，HMR）

   定义
  热更新是指在不刷新整个页面的情况下，实时替换模块的功能。当你修改代码后，Webpack 会仅更新被修改的模块，而不需要重新加载整个页面。

   特点
  - 实时更新：只更新改变的部分，保持应用的状态。
  - 快速反馈：修改代码后几乎立即看到效果，提升开发效率。
  - 支持状态保留：例如，表单中的输入内容不会丢失。

   配置示例
  要启用 HMR，需要在 Webpack 配置中进行相应设置，并确保使用  `webpack-dev-server` ：
  const webpack = require('webpack');

  module.exports = {
    devServer: {
      hot: true, // 启用热更新
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(), // 添加 HMR 插件
    ],
  };
  2. 热重载（Hot Reload）

   定义
  热重载是指在代码更改后，自动刷新整个页面。虽然它会重新加载页面，但通常也会保留一些应用状态（比如表单输入），但不如 HMR 那样精细。

   特点
  - 页面刷新：修改代码后会刷新整个页面，所有模块都会重新加载。
  - 简单易用：相对简单的实现，通常只需配置  `webpack-dev-server` 。
  - 状态可能丢失：由于是页面重新加载，某些状态可能会丢失。

   配置示例
  启用热重载通常只需要配置  `webpack-dev-server` ，不需要额外的插件：
  module.exports = {
    devServer: {
      hot: false, // 禁用热更新，启用热重载
      liveReload: true, // 启用实时重载
    },
  };
  总结

  - 热更新（HMR）：只更新改变的模块，保持应用状态，提升开发效率。
  - 热重载：刷新整个页面，所有模块重新加载，简单易用但可能丢失状态。

  在实际开发中，热更新（HMR）通常是更受欢迎的选择，因为它能提供更好的用户体验和开发效率。使用  `webpack-dev-server`  可以轻松地实现这两种功能，根据项目需求选择合适的方式。

  cnpm install webpack webpack-cli css-loader less less-loader style-loader postcss-loader postcss-preset-env @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping @babel/preset-env babel-loader @babel/core clean-webpack-plugin html-webpack-plugin vue-loader webpack-dev-server webpack-merge --save-dev

  cnpm install vue
  -->
</head>

<body>

  <noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>

</body>

</html>